<template>
	<div class="mt-20px mb-20px text-#ffffff">
		<!-- 顶部 -->
		<ChooseCoin></ChooseCoin>
		<div class="border-t-4px border-solid border-#202020">
			<OptionalRow></OptionalRow>
		</div>
		<!-- 中间 -->
		<div class="border-t-4px border-b-4px border-solid border-#202020
		flex items-start">
			<div class="w-55% box-border border-r-4px border-solid border-#202020">
				<div class="box-border pt-20px pb-20px border-b-4px border-solid border-#202020 text-14px">
					图表
				</div>
				<!-- k线图区域 -->
				<div class="pt-10px pr-10px pb-10px">
					<ChartDiv></ChartDiv>
				</div>
			</div>
			<div class="w-22% box-border  border-r-4px border-solid border-#202020">
				<el-tabs class="spot-index-center-tabs" v-model="activeName">
					<el-tab-pane label="订单簿" name="first">
						<div class="pt-10px pr-10px pb-10px pl-10px h-678px box-border">
							<BarTabs></BarTabs>
						</div>
					</el-tab-pane>
					<el-tab-pane label="最新成交" name="second">
						<div class="pt-10px pr-10px pl-10px pb-10px h-678px box-border">
							最新成交
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
			<div class="w-23% box-border">
				<div class="box-border pt-20px pb-20px pl-20px border-b-4px border-solid border-#202020 text-14px">
					交易
				</div>
				<div class="pt-10px pr-10px pl-10px pb-10px h-678px box-border">
					<RightForm></RightForm>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="w-100% flex items-start">
			<div class="w-77% box-border border-r-4px border-solid border-#202020 ">
				<TablesIndex></TablesIndex>
			</div>
			<div class="w-23% box-border ">
				<AccountRight></AccountRight>
			</div>
		</div>
	</div>
	<SuccessPop :is-show="false"
	icon="/transaction/c2c/orderSell/right.svg"
	title="下单成功"/>
	<SuccessPop :is-show="false"
	icon="/icons/attn-yellow.svg"
	title="市价卖单已成交"/>
	<SuccessPop :is-show="false"
	icon="/icons/attn-yellow.svg"
	title="限价买单已成交"/>
	<MarginMode :is-show="false"></MarginMode>
	<AdjustLeverage :is-show="false"></AdjustLeverage>
	<Transfer :is-show="false"></Transfer>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import ChooseCoin from "./components/ChooseCoin.vue";
import OptionalRow from "./components/OptionalRow.vue";
import ChartDiv from "./components/ChartDiv.vue";
import BarTabs from "./components/BarTabs.vue";
import RightForm from "./components/RightForm.vue";
import TablesIndex from "./Tables/TablesIndex.vue";
import AccountRight from "./components/AccountRight.vue";
import SuccessPop from "./pop/SuccessPop.vue";
import MarginMode from "./pop/MarginMode.vue";
import AdjustLeverage from "./pop/AdjustLeverage.vue";
import Transfer from "./pop/Transfer.vue";
const activeName = ref('first');
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.spot-index-center-tabs {
	.el-tabs__nav-wrap:after {
		height: 4px;
		background-color: #202020;
	}

	.el-tabs__header {
		height: 64px;
		margin-bottom: 0;

		.el-tabs__nav-wrap {
			height: 100%;
		}

		.el-tabs__nav-scroll {
			padding-left: 20px;
			padding-top: 20px;
			color: #FFFFFF;

			.el-tabs__item {
				// padding-top: 16px;
				padding-bottom: 24px;
				font-size: 14px;
				color: #B5B5B5;
			}

			.is-active {
				color: #FFFFFF;
			}
		}

		.el-tabs__active-bar {
			height: 4px;
		}
	}
}
</style>
